//
//  PasswordLoginPage.swift
//  Casecord
//
//  Created by baozi on 2024/1/4.
//

import SwiftUI

struct PwdInputToLoginPage: View {
    @State var passwordTxt: String = ""
    @EnvironmentObject var route: Router
    @StateObject var logic: PwdInputToLoginLogic = PwdInputToLoginLogic()
    @FocusState var passwordFocused: Bool
    var phone: String
    var areaCode: String
    var type: SignType
    
    var navigationTitle: String {
        switch type {
        case .password_login:
            return "Password Login"
        case .password_set:
            return "Password Set"
        case .phone_bind:
            return "Phone Bind"
        }
    }
    
    var body: some View {
        ZStack {
            Theme.color.primaryBackgroundColor
                .ignoresSafeArea()
            VStack {
                Color.clear.frame(height: 100)
                switch type {
                case .password_login:
                    SecureField(
                        "password",
                        text: $passwordTxt,
                        prompt:
                            Text("Enter password")
                            .foregroundColor(Theme.color.text)
                    )
                    .focused($passwordFocused)
                    .padding()
                    .frame(maxWidth: .infinity)
                    .frame(height: 55)
                    .withCapsuleBg(colors: [Color.white])
                    .padding()
                    HStack {
                        Spacer()
                        Text("Verification code login")
                            .underline()
                            .foregroundColor(Color.white)
                            .paddingRight(20)
                    }
                    .paddingTop(-15)
                    .onTapGesture {
                        logic.toVerifyCodeLogin(areaCode: areaCode, phone: phone)
                    }
                case .password_set:
                    SecureField(
                        "password",
                        text: $passwordTxt,
                        prompt:
                            Text("Enter password")
                            .foregroundColor(Theme.color.text)
                    )
                    .focused($passwordFocused)
                    .padding()
                    .frame(maxWidth: .infinity)
                    .frame(height: 55)
                    .withCapsuleBg(colors: [Color.white])
                    .padding()
                case .phone_bind:
                    Text("phoneBind")
                }
                
                
                Button(action: {
                    logic.toNext(areaCode: areaCode, phone: phone, password: passwordTxt)
                }, label: {
                    Text("Next")
                        .foregroundColor(Theme.color.primaryBackgroundColor)
                        .font(.system(size: 18))
                        .padding()
                        .paddingHorizontal(20)
                        .withCapsuleBg(colors: [Color.white], shadow: Color.gray, radius: 10)
                })
                .paddingTop(30)
                Spacer()
            }
            .setCustomNav(title: navigationTitle)
        }
        .onAppear(perform: {
            logic.router = route
            logic.type = type
            passwordFocused = true
        })
    }
}

#Preview {
    PwdInputToLoginPage(phone: "1234", areaCode: "86", type: .password_set)
        .environmentObject(Router())
}
